/* _variables.scss */

// 品牌色系 
$color-primary: #3370ff;
$color-primary-light-1: #4d7fff;
$color-primary-light-2: #668eff;
$color-primary-light-3: #809dff;
$color-primary-light-4: #99acff;
$color-primary-light-5: #b3bbff;
$color-primary-light-6: #cccaff;
$color-primary-light-7: #e6d9ff;
$color-primary-light-8: #f0ecff;
$color-primary-light-9: #f8f6ff;

$color-primary-dark-1: #2d5ce6;
$color-primary-dark-2: #2748cc;

// 功能色系 
$color-success: #52c41a;
$color-success-light: #73d13d;
$color-success-lighter: #b7eb8f;
$color-success-extra-light: #f6ffed;

$color-warning: #faad14;
$color-warning-light: #ffc53d;
$color-warning-lighter: #ffe58f;
$color-warning-extra-light: #fffbe6;

$color-danger: #ff4d4f;
$color-danger-light: #ff7875;
$color-danger-lighter: #ffb3b3;
$color-danger-extra-light: #fff2f0;

$color-info: #1890ff;
$color-info-light: #40a9ff;
$color-info-lighter: #91d5ff;
$color-info-extra-light: #e6f7ff;

// 中性色系 
$color-text-primary: #1a1a1a;
$color-text-secondary: #4a4a4a;
$color-text-tertiary: #737373;
$color-text-quaternary: #a3a3a3;
$color-text-disabled: #d4d4d4;
$color-text-placeholder: #9ca3af;

// 边框色系
$border-color-base: #d1d5db;
$border-color-light: #e5e7eb;
$border-color-lighter: #f3f4f6;
$border-color-extra-light: #f9fafb;

// 背景色系
$bg-color-white: #ffffff;
$bg-color-container: #ffffff;
$bg-color-layout: #f8fafc;
$bg-color-hover: #f1f5f9;
$bg-color-active: #e0f2fe;
$bg-color-disabled: #f3f4f6;

// 字体系统 
$font-family-base:
  -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
  Helvetica, Arial, sans-serif;
$font-family-code: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

// 字体大小 - 使用更现代的尺寸比例
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$font-size-2xl: 24px;
$font-size-3xl: 28px;

// 字重
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// 行高
$line-height-tight: 1.25;
$line-height-normal: 1.5;
$line-height-relaxed: 1.75;

// 间距系统
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-base: 12px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-2xl: 48px;
$spacing-3xl: 64px;
$spacing-4xl: 80px;

// 圆角系统
$border-radius-xs: 2px;
$border-radius-sm: 4px;
$border-radius-base: 8px;
$border-radius-md: 12px;
$border-radius-lg: 16px;
$border-radius-xl: 20px;
$border-radius-2xl: 24px;
$border-radius-full: 50%;

// 阴影系统
$box-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
$box-shadow-sm:
  0 1px 3px 0 rgba(0, 0, 0, 0.08),
  0 1px 2px 0 rgba(0, 0, 0, 0.04);
$box-shadow-base:
  0 4px 6px -1px rgba(0, 0, 0, 0.08),
  0 2px 4px -1px rgba(0, 0, 0, 0.04);
$box-shadow-md:
  0 10px 15px -3px rgba(0, 0, 0, 0.08),
  0 4px 6px -2px rgba(0, 0, 0, 0.03);
$box-shadow-lg:
  0 20px 25px -5px rgba(0, 0, 0, 0.08),
  0 10px 10px -5px rgba(0, 0, 0, 0.03);
$box-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

// 过渡动画
$transition-fast: 0.15s ease-in-out;
$transition-base: 0.25s ease-in-out;
$transition-slow: 0.35s ease-in-out;

// 使用现代化的断点值，基于 Bootstrap 5 标准
$breakpoints: (
  xs: 0px,      // 超小屏幕（手机竖屏）
  sm: 576px,    // 小屏幕（手机横屏）
  md: 768px,    // 中等屏幕（平板竖屏）
  lg: 992px,    // 大屏幕（平板横屏/小桌面）
  xl: 1200px,   // 超大屏幕（桌面）
  xxl: 1600px   // 超超大屏幕（大桌面）
);

// 层级系统
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

// ===== 布局尺寸变量 =====
// 侧边栏尺寸
$sidebar-width: 240px;
$sidebar-collapsed-width: 64px;
$sidebar-tablet-width: 200px;

// 导航栏尺寸
$navbar-height: 64px;

// 页面内边距
$page-padding: 24px;
$page-padding-mobile: 16px;
